<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        el-header {

        }

        #d1 {
            position: fixed;
            top: 0;
            background: #ffffff;
            max-width: 2560px;
            width: 100%;
            height: 64px;
        }

        .s1 {
            text-align: center;
            font-size: 14px;
            line-height: 20px;
        }

        a {
            text-decoration: none;
        }

        .el-footer div {
            background: #292929;
        }

        .deanofficial {
            background: #292929;
            padding: 15px 0;
            text-align: center;
            overflow: hidden;
            color: #aaaaaa;
            border: 1px solid #aaaaaa
        }

        .deanofficial a {
            background: #292929;
            padding: 15px 0;
            text-align: center;
            overflow: hidden;
            color: #aaaaaa;
        }

        .ft-link {
            border: 1px solid #aaaaaa
        }

        .ft-link a {
            display: inline-block;
            margin: 0 12px 0 0;
            background: #292929;
            text-align: center;
            overflow: hidden;
            color: #aaaaaa;

        }

        .el-row {
            margin-bottom: 20px;
        }

        .form-sec input {
            width: 230px;
            height: 38px;
            border: 1px solid #e5e5e5;
            font-size: 14px;
            padding: 0 15px;
            line-height: 18px;
            background: #FFF;
            color: #666;
        }
    </style>
</head>
<body>
<div id="app" style="width:1300px;margin: 0 auto">
    <el-container>
        <!---->
        <el-header>
            <div id="d1">
                <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#ffffff"
                        text-color="#18191c"
                        active-text-color="#18191c">
                    <el-menu-item index="1">
                        <div style="
            margin-right: 25px;
            width: 60px;
            cursor: pointer;">
                            <a href="zhiFu.html">
                                <img src="../imgs/logo.png" style="width: 100px;height: 30px">
                            </a>
                        </div>
                    </el-menu-item>
                    <el-menu-item><a class="s1">首页</a></el-menu-item>
                    <el-menu-item><a class="s1">目的地</a></el-menu-item>
                    <el-menu-item><a class="s1">去旅行</a></el-menu-item>
                    <el-menu-item><a class="s1">机票</a></el-menu-item>
                    <el-menu-item><a class="s1">订酒店</a></el-menu-item>
                    <el-menu-item>
                        <div style="float: right;position: relative;margin: auto">
                            <el-input type="text">
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </el-menu-item>
                    <el-menu-item><a href=""><span>登录</span></a></el-menu-item>
                    <el-menu-item><a href=""><span>注册</span></a></el-menu-item>

                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div >
                <div style="width: 1200px;height: 77px;margin:auto">
                    <el-steps :space="1000" :active="1" finish-status="success">
                        <el-step title="提交订单"></el-step>
                        <el-step title="确认支付"></el-step>
                        <el-step title="完成购买"></el-step>
                    </el-steps>
                </div>
                <div>
                    <h2>
                        <el-button type="danger" icon="el-icon" size="mini" circle>1</el-button>
                        出行人信息（<span>用于安排出行人行程</span>）
                    </h2>
                    <h4 style="margin-left:42px">出行人1</h4>

                    <div style="line-height: 50px">

                        <el-row>
                            <p><input type="text" placeholder="中文姓名"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                            <p><input type="text" placeholder="身份证"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                                <input type="text"
                                       style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                            <p><input type="text" placeholder="联系电话"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                        </el-row>
                    </div>
                </div>
                <div>
                    <h2>
                        <el-button type="danger" icon="el-icon" size="mini" circle>2</el-button>
                        预订人信息（<span>用于接收订单反馈</span>）
                    </h2>
                    <div style="line-height: 50px"
                         style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                        <el-row>
                            <p><input type="text" placeholder="请填写您的真实姓名"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                            <p><input type="text" placeholder="手机"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                            <p><input type="text" placeholder="邮箱"
                                      style="width: 230px;height: 38px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                            <p><input type="text" placeholder="备注信息"
                                      style="width: 600px;height: 80px;border: 1px solid #e5e5e5;font-size: 14px;padding: 0 15px;line-height: 18px;">
                            </p>
                        </el-row>


                    </div>
                </div>

                <el-row>
                    <el-col span="12">
                        <h3><el-button type="danger" icon="el-icon" size="mini" circle>+</el-button>使用马蜂窝优惠券</h3>
                    </el-col>
                    <el-col span="12"><h4 style="text-align:left;">订单金额：￥1600.00元</h4></el-col>
                </el-row>
            </div>
        </el-main>


        <el-footer>

            <div class="ft-link">
                <a target="_blank" href="http://china.makepolo.com/">马可波罗</a><a target="_blank"
                                                                                href="http://www.onlylady.com/">Onlylady女人志</a><a
                    target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a><a target="_blank"
                                                                               href="http://www.cncn.com">欣欣旅游网</a><a
                    target="_blank" href="http://www.8264.com/">户外运动</a><a target="_blank"
                                                                           href="http://www.yue365.com/">365音乐网</a><a
                    target="_blank" href="http://ishare.iask.sina.com.cn/">爱问共享资料</a><a target="_blank"
                                                                                        href="http://www.uzai.com/">旅游网</a><a
                    target="_blank" href="http://www.zongheng.com/">小说网</a><a target="_blank"
                                                                              href="http://www.xuexila.com/">学习啦</a><a
                    target="_blank" href="http://www.zhcpic.com/">问答</a><a target="_blank" href="http://www.lvmama.com">驴妈妈旅游网</a><a
                    target="_blank" href="http://www.haodou.com/">好豆美食网</a><a target="_blank"
                                                                              href="http://www.taoche.com/">二手车</a><a
                    target="_blank" href="http://www.lvye.cn">绿野户外</a><a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a><a
                    target="_blank" href="http://www.mapbar.com/">图吧</a><a target="_blank" href="http://www.chnsuv.com">SUV联合越野</a><a
                    target="_blank" href="http://www.uc.cn/">手机浏览器</a><a target="_blank" href="http://sh.city8.com/">上海地图</a><a
                    target="_blank" href="http://www.tianqi.com/">天气预报查询</a><a target="_blank"
                                                                               href="http://www.ly.com/">同程旅游</a><a
                    target="_blank" href="http://www.tieyou.com/">火车票</a><a target="_blank"
                                                                            href="https://daxue.mafengwo.cn/#/">马蜂窝行业赋能中心</a><a
                    target="_blank" href="https://m.weelv.com">马尔代夫旅游</a><a target="_blank"
                                                                            href="http://www.yunos.com/">YunOS</a><a
                    target="_blank" href="http://you.ctrip.com/">携程旅游</a><a target="_blank"
                                                                            href="http://www.jinjiang.com">锦江旅游</a><a
                    target="_blank" href="http://www.huoche.net/">火车时刻表</a><a target="_blank"
                                                                              href="http://www.tripadvisor.cn/">TripAdvisor</a><a
                    target="_blank" href="http://www.tianxun.com/">天巡网</a><a target="_blank"
                                                                             href="http://www.zuzuche.com">租租车</a><a
                    target="_blank" href="http://www.zhuna.cn/">酒店预订</a><a target="_blank"
                                                                           href="http://www.ailvxing.com">爱旅行网</a><a
                    target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a><a target="_blank"
                                                                                   href="http://vacations.ctrip.com/">旅游网</a><a
                    target="_blank" href="http://www.wed114.cn">wed114结婚网</a><a target="_blank"
                                                                                href="http://www.chexun.com/">车讯网</a><a
                    target="_blank" href="http://www.aoyou.com/">遨游旅游网</a><a target="_blank" href="http://www.91.com/">手机</a>
                <a href="http://www.mafengwo.cn/s/link.html" target="_blank">更多友情链接&gt;&gt;</a>
            </div>


            <div class="deanofficial">

                Copyright &nbsp;&nbsp;©2018-2020&nbsp;&nbsp;<a href="http://www.hongbeiguan.com/"
                                                               target="_blank">马蜂窝</a>Powered by©<a href="#"
                                                                                                    target="_blank">Discuz!</a>技术支持：<a
                    href="https://www.hongbeiguan.com" target="_blank">马蜂窝</a>&nbsp;&nbsp;&nbsp;&nbsp;( <a
                    href="https://beian.miit.gov.cn/" target="_blank">赣ICP备19004781号-4</a> )
            </div>
        </el-footer>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                activeIndex2: '1',
            };

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>